<template>
	<view class="home">
		<view style="padding: 15px;">
			<person-informa></person-informa>
		</view>
		<view class="home_head">
			<view class="home_head_image">
				<image src="../../../../static/img/download.png" mode=""></image>
			</view>
			<view class="home_title">
				<view>PLAY</view>
				<view>$DAWG JUMP</view>
				<view>WIN</view>
				<view>AIRDROP</view>
			</view>
		</view>
		<view style="color: #fff;">
			
			{{user.first_name}}
			{{user.auth_date}}
			{{user.first_name}}
			{{user.hash}}
			{{user.photo_url}}
			{{user.last_name}}
		</view>
		 <button @click="loginTelegram">电报登录</button>
		 <button @click="authorizeTelegram">电报小程序登录</button>
		 <p v-if="userInfo">用户ID：{{ userInfo.id }}</p>
		 <p v-if="userInfo">用户名：{{ userInfo.first_name }}</p>
		<!-- <telegram-login size="large"></telegram-login> -->
		<button class="sbumit_bnt" size="default" type="default" hover-class="is-hover" @click="signInHandel">Play now</button>
		<view class="home_list">
			<view class="home_list_title">
				<view class="title">Airdrop Missions</view>
				<view class="icon" @click="chakan">
					<view>See more</view>
					<image src="../../../../static/img/chevron-right.png" mode=""></image>
				</view>
			</view>
			<price-item :list="pricedata"></price-item>
		</view>
	</view>
</template>


<script>
	import {request} from '@/api/api.js'
	import TelegramLogin from '@/components/Telegram/Telegram.vue'
	import personInforma from '@/components/personInforma.vue'
	import priceItem from '@/components/priceIte.vue'
	import data from'@/static/data.js'
	export default {
		components:{
			personInforma,
			priceItem,
			TelegramLogin,
		},
		data() {
			return {
				pricedata:data.priceLists,
				user:{},
				botToken: 'AAGccIhk2dH8TCrncLLTMEVgTYfwyubi7zE',
				telegramUserId: '7478309203',
				userInfo: null
			}
		},
		onShow() {
			
		},
		mounted() {
			this.rankingGetData()
		},
		methods: {
			 authorizeTelegram() {
			  // 替换为你的Telegram Bot API Token 和 目标Bot的用户名
		// 	  const botToken = 'AAGccIhk2dH8TCrncLLTMEVgTYfwyubi7zE';
		// 	  const botUsername = 'JumpAndSay_bot';
		
		// 	  // 构建授权链接
		// 	  const authUrl = `https://api.telegram.org/bot${botToken}/sendMessage?chat_id=@${botUsername}&text=Start`;
		
		// 	  // 在新窗口中打开授权链接
		// 	  window.open(authUrl, '_blank');
				const TELEGRAM_BOT_TOKEN = 'AAGccIhk2dH8TCrncLLTMEVgTYfwyubi7zE';
				uni.request({
					url:`https://api.telegram.org/bot${TELEGRAM_BOT_TOKEN}`,
					method:'GET',
					success: (res) => {
						console.log('dada',res)
					},fail: (err) => {
						console.log('dadada',err)
					}
				})
			},
			handleLoginSuccess(user){
				console.log('获取电报小程序用户信息')
				this.user = user
			},
			chakan(){
				this.$emit('AirdropIndex',4)
			},
			signInHandel(){
				this.$emit('AirdropIndex',1)
				// uni.navigateTo({
				// 	url:'/pages/gameWeb/gameWeb'
				// })
			},
			loginTelegram() {
				// window.location.href = 'https://oauth.telegram.org/auth?bot_id=7478309203&origin=https%3A%2F%2Fxcx.zhimulp.online&embed=1&request_access=write&return_to=https%3A%2F%2Fxcx.zhimulp.online%2Fen%2Flogin'
				// uni.showToast({
				// 	icon:'error',
				// 	title:'没有东西'
				// })
			 //        //这里唯一要做的就是把你机器人参数传入进去（获取机器人token哪里可以看到）
				window.Telegram.Login.auth(
				{
					bot_id: '7478309203',
					request_access: 'write',
					embed: 1 ,
					// return_to:"https://t.me/JumpAndSay_bot/Jump",
				}, (data) => {
					console.log(data, '这是回调数据');//这里的data和之前返回的user数据和格式无差异
					if (!data) {
						//失败时你需要做的逻辑
						uni.showToast({
							icon:'error',
							title:'login failure'
						})
					}
					
						//电报登录成功你需要做的逻辑（这里我是直接写了一个函数去调用登录成功后的业务逻辑）
					this.yourCallbackFunction(data)
				})
			},

			yourCallbackFunction(user) {
				console.log(user);
				this.user = user
			//正常回调拿到的user信息
			//{
			//	auth_date: 1646705584, first_name: "zzx",…}
			//	auth_date: 1646705584
			//	first_name: "zzx"
			//	hash: "9118f5e1c53d7cf3308c696565d26efc96f90d0fb59255b82bc39fd4636ddc50"
			//	id: 5021490450
			//	last_name: "fys"
			//	photo_url: "https://t.me/i/userpic/320/jvyC1v4qH7KrQqUBr5T0dK04wNm_Vr_Acl9WMynKMiuG-ToB9_E01-WCLJn8flUB.jpg"}
			//}
			//	这里需要写你业务的逻辑需求
		},
		// 任务列表接口
		rankingGetData(){
			request({url: '/taskinfo/page',method: 'GET'}).then(res => {
				console.log('rewaa',res)
				if(res.data.code === 200){
					
				}
			})
		}
	  }
	}
</script>

<style lang="scss" scoped>
.home{
	width: 100%;
	overflow: auto;
	.sbumit_bnt{
		width: calc(100% - 30px);
		height: 54px;
		line-height: 54px;
		background: rgba(193, 227, 255, 1);
		font-family: Inter;
		font-size: 17px;
		font-weight: 600;
		text-align: center;
		margin: 15px auto;
		border-radius: 10px;
	}
	.home_list{
		width: calc(100% - 30px);
		// padding: 15px 10px;
		margin: 0 auto;
		border-radius: 10px;
		background: linear-gradient(180deg, #F5DF8A 33.92%, #F7AD3E 100%);
		.title{
			height: 30px;
			line-height: 30px;
			font-family: Inter;
			font-size: 16px;
			font-weight: 600;
			letter-spacing: -0.4000000059604645px;
			text-align: left;
			color: #000;

		}
		.home_list_title{
			width: calc(100% - 30px);
			margin: 0 auto;
			padding: 10px 0;
			height: 30px;
			margin-bottom: 10px;
			display: flex;
			justify-content: space-between;
			.icon{
				height: 30px;
				line-height: 30px;
				padding: 0 10px;
				background: #fff;
				font-family: Inter;
				font-size: 12px;
				font-weight: 600;
				text-align: left;
				border-radius: 5px;
				display: flex;
				image{
					width: 14px;
					height: 14px;
					background-size: cover;
					background-repeat: no-repeat;
					margin-top: 9.5px;
					margin-left: 5px;
				}
			}
		}
	}
	.home_head{
		width: calc(100% - 38px);
		height: 126px;
		background: linear-gradient(to top,#C1E3FF,#8ABCE4);
		margin: 0 auto;
		border-radius: 10px;
		border: 4px solid #fff;
		display: flex;
		justify-content: flex-end;
		justify-items: end;
		position: relative;
		overflow: hidden;
		.home_title{
			width: 70%;
			height: 100%;
			text-align: center;
			view:first-child{
				font-family: Neufreit;
				font-size: 16px;
				font-weight: 800;
				line-height: 20px;
				text-align: center;
				margin-top: 11px;
				color: #000;
			}
			view:nth-child(2){
				font-family: Neufreit;
				font-size: 26px;
				font-weight: 800;
				line-height: 30px;
				text-align: center;
				color: rgba(0, 53, 76, 1);

			}
			view:nth-child(3){
				font-family: Neufreit;
				font-size: 16px;
				font-weight: 800;
				line-height: 20px;
				color: #000;
			}
			view:last-child{
				font-family: Neufreit;
				font-size: 30px;
				font-weight: 800;
				line-height: 35px;
				background: linear-gradient(89.65deg, #987900 6.09%, #FFCB00 30.46%, #C9A000 40.01%, #FFCB00 50.05%, #C09900 55.3%, #EEBE00 74.42%, #B99300 82.42%, #534200 101.66%);
				-webkit-background-clip: text; /* Chrome, Safari */
				background-clip: text;
				-webkit-text-fill-color: transparent; /* Chrome, Safari */
				color: transparent; /* Overrides the color property */

			}
		}
		.home_head_image{
			width: 157px;
			height: 124px;
			position: absolute;
			bottom: -32px;
			left: 0;
			image{
				width: 120px;
				height: 120px;
				background-size: cover;
				background-repeat: no-repeat;
			}
		}
	}
}
</style>
